{% extends '__base__.html' %}

{% block title %}登录{% endblock %}

{% block beforehead %}
<script xmlns:v-on="http://www.w3.org/1999/xhtml">

function validateEmail(email) {
    var re = /^[a-z0-9\.\-\_]+\@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+){1,4}$/;
    return re.test(email.toLowerCase());
}

$(function () {
    var vm = new Vue({
        el: '#vm',
        data:{
            email: '',
            passwd:''
        },
        // computed property for form validation state
        computed: {
            validation: function () {
                return {
                    email: validateEmail(this.email.trim().toLowerCase()),
                    passwd: !(this.passwd && this.passwd.length < 6)
                }
            },
            isValid: function () {
                var validation = this.validation
                return Object.keys(validation).every(function (key) {
                    return validation[key]
                })
            }
        },
        methods:{
            submit: function(e){
                e.preventDefault();
                var $form = $('#vm');
                var email = this.email.trim().toLowerCase();
                var data = {
                    email: email,
                    passwd: CryptoJS.SHA1(email + ':' + this.passwd).toString()
                };
                console.log(data);
                if(this.isValid){
                    $.post('/api/authenticate',data,function(rtn){
                        console.log(rtn);
                        alert(rtn.admin);

                        return location.assign('/');
                    },'json');

                }
            }
        }
    });
    $('#vm').show();
});

</script>

{% endblock %}

{% block content %}

<div class="uk-vertical-align uk-text-center uk-height-1-1">
    <div class="uk-vertical-align-middle" style="width: 320px">
        <p><a href="/" class="uk-icon-button"><i class="uk-icon-html5"></i></a> <a href="/">Awesome Python Webapp</a>
        </p>
        <form id="vm" v-on:submit="submit" class="uk-panel uk-panel-box uk-form">
            <div class="uk-alert uk-alert-danger uk-hidden"></div>
            <div class="uk-form-row">
                <div class="uk-form-icon uk-width-1-1">
                    <i class="uk-icon-envelope-o"></i>
                    <input v-model="email" name="email" type="text" placeholder="电子邮件" maxlength="50"
                           class="uk-width-1-1 uk-form-large">
                </div>
            </div>
            <div class="uk-form-row">
                <div class="uk-form-icon uk-width-1-1">
                    <i class="uk-icon-lock"></i>
                    <input v-model="passwd" name="passwd" type="password" placeholder="口令" maxlength="50"
                           class="uk-width-1-1 uk-form-large">
                </div>
            </div>
            <div class="uk-form-row">
                <button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large"><i
                        class="uk-icon-sign-in"></i> 登录
                </button>
            </div>
        </form>
    </div>
</div>

{% endblock %}